<template>
  <div class="company_message_page">
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        账号信息
      </div>
      <div class="content">
        <div class="msg_box">
          <el-row class="row">
            <el-col :span="24">
              <div class="msg_line">
                <div class="key">平台id：</div>
                <div class="val">{{ detailObj.code }}</div>
                <div class="text">变更管理员后，将有新管理员管理平台系统</div>
                <div class="value">
                  <el-button
                    type="primary"
                    class="btn"
                    @click="adminDialogVisible = true"
                    >管理员变更</el-button
                  >
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="24">
              <div class="msg_line">
                <div class="key">平台账号：</div>
                <div class="val">{{ phonenumber }}</div>
                <div class="text">变更手机号后，将使用新的手机号登录系统</div>
                <div class="value">
                  <el-button type="primary" class="btn" @click="accountDialogVisible = true">账号变更</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        基础信息
      </div>
      <div class="content">
        <div class="msg_box">
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">姓名：</div>
                <div class="value">
                  {{ detailObj.adminOperation.contactName }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件类型：</div>
                <div class="value">
                  {{ detailObj.adminOperation.contactType }}
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">身份证号：</div>
                <div class="value">
                  {{ detailObj.adminOperation.contactId }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">性别：</div>
                <div class="value">
                  {{ detailObj.adminOperation.contactSex }}
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">民族：</div>
                <div class="value">
                  {{ detailObj.adminOperation.contactEthnic }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">签发机关：</div>
                <div class="value">
                  {{ detailObj.adminOperation.contactIssuing }}
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">出生日期：</div>
                <div class="value">
                  {{ detailObj.adminOperation.contactBirth }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件起始日期：</div>
                <div class="value">
                  {{ detailObj.adminOperation.contactCardStart }}
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件到期日期：</div>
                <div class="value">
                  {{ detailObj.adminOperation.contactCardEnd === '1' ? '' : detailObj.adminOperation.contactCardEnd }}
                  <el-checkbox
                    v-if="detailObj.adminOperation.contactCardEnd === '1'"
                    :disabled="true"
                    :value="true"
                    class="long_effect"
                  >长期有效</el-checkbox>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">户籍地址：</div>
                <div class="value">
                  {{ detailObj.adminOperation.contactAddress }}
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">手机号码：</div>
                <div class="value">
                  {{ detailObj.adminOperation.contactPhone }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">邮箱：</div>
                <div class="value">
                  {{ detailObj.adminOperation.contactEmail }}
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        附件信息
      </div>
      <div class="content">
        <div class="img_list">
          <div class="img_item">
            <div class="img_box">
              <img
                :src="baseURL + detailObj.adminOperation.contactRPic"
                alt=""
                class="img"
              />
              <div class="mask">
                <i
                  class="el-icon-search"
                  @click.stop="
                    previewBigImg(detailObj.adminOperation.contactRPic)
                  "
                ></i>
              </div>
            </div>
            <div class="name">身份证人像面</div>
          </div>
          <div class="img_item">
            <div class="img_box">
              <img
                :src="baseURL + detailObj.adminOperation.contactBPic"
                alt=""
                class="img"
              />
              <div class="mask">
                <i
                  class="el-icon-search"
                  @click.stop="
                    previewBigImg(detailObj.adminOperation.contactBPic)
                  "
                ></i>
              </div>
            </div>
            <div class="name">身份证国徽面</div>
          </div>
          <div class="img_item" v-if="detailObj.adContactCorporate">
            <div class="sign_box">
              <img src="@/assets/authenticate/pdf.png" alt="" class="img" />
              <div class="mask">
                <a
                  class="el-icon-search"
                  :href="baseURL + detailObj.adContactCorporate"
                  target="_blank"
                ></a>
              </div>
            </div>
            <div class="name">法人授权委托书</div>
          </div>
        </div>
      </div>
    </div>
    <CustomDialog
      class="dialog"
      title="温馨提示"
      width="50%"
      :visible="adminDialogVisible"
      :buttonArray="[
        {
          text: '取消',
          clickFn: closeAdminDialog,
        },
        {
          text: '确定',
          loading: changeAdminLoading,
          clickFn: changeManagerSubmit,
        }
      ]"
      @close="closeAdminDialog"
    >
      <div class="content">
        <el-form
          ref="adminForm"
          :model="adminForm"
          :rules="adminRules"
          label-width="160px"
          label-position="right"
        >
          <el-form-item label="选择新管理员" prop="userId">
            <el-select v-model="adminForm.userId" style="width: 100%">
              <el-option value="">请重新选择管理员</el-option>
              <el-option
                v-for="item in operationList"
                :key="item.userId"
                :label="item.contactName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <div class="upload_box">
            <el-form-item label="上传法人授权委托书" prop="url">
              <div class="upload_line">
                <div v-if="adminForm.url" class="pdf">
                  <img class="img" src="@/assets/authenticate/pdf.png" alt="" />
                  <div class="mask">
                    <a
                      :href="baseURL + adminForm.url"
                      target="_blank"
                      class="el-icon-search preview"
                    ></a>
                    <i
                      class="el-icon-delete delete"
                      @click.stop="adminForm.url = ''"
                    ></i>
                  </div>
                </div>
                <div class="sign_template" v-loading="uploadFileLoading" v-else>
                  <input
                    type="file"
                    accept="application/pdf,"
                    name="file"
                    class="upload_input"
                    @change="uploadFrSignImg"
                  />
                </div>
                <div class="desc">
                  点击
                  <a class="download_a" :href="baseURL + downloadTemplate1.fileUrl" target="_blank">下载</a>
                  法人授权委托书模版
                </div>
              </div>
            </el-form-item>
          </div>
          <el-form-item label="手机号码" prop="contactPhone">
            <el-input :disabled="true" :value="createPhonenumber"></el-input>
          </el-form-item>
          <el-form-item label="输入短信验证码" prop="code">
            <div class="code_line">
              <el-input v-model="adminForm.code"></el-input>
              <el-button
                type="primary"
                class="get_code"
                :loading="adminCodeLoading"
                @click="getAdminCode"
              >
                {{ sNumber > -1 ? sNumber + 's' : '获取验证码' }}
              </el-button>
            </div>
          </el-form-item>
        </el-form>
        <!-- <div class="btns">
          <el-button class="btn" @click="closeAdminDialog"
            >取 消</el-button
          >
          <el-button
            class="btn"
            type="primary"
            :loading="changeAdminLoading"
            @click="changeManagerSubmit"
          >
            确 定
          </el-button>
        </div> -->
      </div>
    </CustomDialog>
    <CustomDialog
      class="dialog"
      title="温馨提示"
      width="50%"
      :visible="accountDialogVisible"
      :buttonArray="[
        {
          text: '取消',
          clickFn: closeAccountDialog,
        },
        {
          text: '确定',
          loading: changeAccountLoading,
          clickFn: changeAccountSubmit,
        }
      ]"
      @close="closeAccountDialog"
    >
      <div class="content">
        <el-form
          ref="accountForm"
          :model="accountForm"
          :rules="accountRules"
          label-width="140px"
          label-position="right"
        >
          <el-form-item label="原有手机号">
            <el-input :disabled="true" :value="createPhonenumber"></el-input>
          </el-form-item>
          <el-form-item label="新手机号" prop="phonenumber">
            <el-input v-model="accountForm.phonenumber"></el-input>
          </el-form-item>
          <el-form-item label="输入短信验证码" prop="code">
            <div class="code_line">
              <el-input v-model="accountForm.code"></el-input>
              <el-button
                type="primary"
                class="get_code"
                :loading="accountCodeLoading"
                @click="getAccountCode"
              >
                {{ sNumber > -1 ? sNumber + 's' : '获取验证码' }}
              </el-button>
            </div>
          </el-form-item>
        </el-form>
        <!-- <div class="btns">
          <el-button class="btn" @click="closeAccountDialog">取 消</el-button>
          <el-button
            class="btn"
            type="primary"
            :loading="changeAccountLoading"
            @click="changeAccountSubmit"
          >
            确 定
          </el-button>
        </div> -->
      </div>
    </CustomDialog>
    <CustomDialog
      title="查看内容"
      width="70%"
      :visible="dialogVisible"
      @close="closeDialog"
    >
      <div class="mask_dialog_content">
        <div class="img_box">
          <img :src="baseURL + previewBigImgUrl" alt="" class="img" />
        </div>
      </div>
    </CustomDialog>
  </div>
</template>

<script>
import { getCompanyMsg } from "@/api/production";
import { changeAdmin, getCode, changeAccount } from '@/api/companyManage'
import { operationList } from "@/api/companyManage";
import { uploadImg } from "@/utils/request";
import { downloadTemplate } from "@/api/authenticate";
import CustomDialog from '@/customComponents/dialog'
import { mapState } from 'vuex'

export default {
  components: {
    CustomDialog,
  },
  data() {
    return {
      baseURL: process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API :
        process.env.VUE_APP_HTTP_REQUEST_ADDRESS,
      // 状态 0：未认证 1：等待审核 2：已认证 3：认证失败
      detailObj: {
        companyPhone: '',
        enterpriseBank: {},
        adminOperation: {},
      },
      adminDialogVisible: false,
      operationList: [], // 运营人员列表
      uploadFileLoading: false,
      adminCodeLoading: false,
      changeAdminLoading: false,
      downloadTemplate1: {
        fileUrl: '',
      },
      createPhonenumber: '',
      adminForm: {
        userId: "", // 管理员
        url: "", // '法人授权委托书',
        code: "",
        uuid: "",
      },
      adminRules: {
        userId: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请选择新的管理员",
          },
        ],
        url: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请上传法人授权委托书",
          },
        ],
        code: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入验证码",
          },
        ],
      },
      accountDialogVisible: false,
      accountCodeLoading: false,
      changeAccountLoading: false,
      accountForm: {
        phonenumber: '',
        code: '',
        uuid: '',
      },
      accountRules: {
        phonenumber: [{ required: true, trigger: ['change', 'blur'], message: '请输入手机号' }],
        code: [{ required: true, trigger: ['change', 'blur'], message: '请输入验证码' }],
      },
      dialogVisible: false,
      previewBigImgUrl: "",
      sNumber: -1, // 倒计时
      timer: null, // 倒计时
    };
  },
  computed: {
    ...mapState({
      phonenumber: state =>  state.user.userObj.userName,
    })
  },
  watch: {
    'detailObj.companyPhone': {
      handler: function (newVal) {
        if (newVal) {
          this.createPhonenumber = newVal?.slice(0, 3) +
          "*".repeat(4) +
          newVal?.slice(-4)
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.downloadTemplate(1).then((res) => {
      this.downloadTemplate1 = res.data;
    }); // 法人授权委托书
    this.getCompanyMsg(); // 根据登录人即可获取，不需要传参
    this.getOperationList();
  },
  methods: {
    getCompanyMsg() {
      getCompanyMsg().then((res) => {
        this.detailObj = res.data;
      });
    },
    previewBigImg(url) {
      this.previewBigImgUrl = url;
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.previewBigImgUrl = "";
    },
    // 获取运营人员列表
    getOperationList() {
      operationList().then((res) => {
        this.operationList = res.rows;
      });
    },
    // 下载模板
    downloadTemplate(id) {
      return new Promise((resolve, reject) => {
        downloadTemplate(id).then((res) => {
          resolve(res);
        });
      });
    },
    // 图片上传校验
    imgValidate(fileType, fileSize, name, types = 'image/jpeg,image/jpg,image/png') {
      if (types.indexOf(fileType.split('/')[1]) === -1) {
        this[name] = '上传格式不正确'
        return false
      }
      if (fileSize/1000/1024 > 10) {
        this[name] = '大小不超过10M'
        return false
      }
      return true
    },
    // 上传法人授权妥托书
    uploadFrSignImg(e) {
      const file = e.target.files[0];
      if (
        !this.imgValidate(
          file.type,
          file.size,
          "signaturePicError",
          "application/pdf"
        )
      ) {
        return;
      }
      this.uploadFileLoading = true;
      uploadImg("/common/upload", { file })
        .then((res) => {
          this.uploadFileLoading = false;
          this.adminForm.url = res.fileName;
          this.adContactCorporateError = " ";
        })
        .catch(() => {
          this.uploadFileLoading = false;
        });
    },
    countFn() {
      this.timer = setTimeout(() => {
        if (this.sNumber > -1) {
          --this.sNumber
          this.countFn()
        } else {
          clearTimeout(this.timer)
          this.timer = null
        }
      }, 1000);
    },
    countDown() {
      this.sNumber = 60
      this.countFn()
    },
    // 获取管理员验证码
    getAdminCode() {
      this.adminCodeLoading = true
      // { phonenumber: this.detailObj.adminOperation.contactPhone }
      getCode(4).then((res) => {
        this.adminCodeLoading = false
        this.adminForm.uuid = res.uuid;
        this.countDown()
      }).catch(() => {
        this.adminCodeLoading = false
      });
    },
    // 更新管理员提交
    changeManagerSubmit() {
      console.log(this.adminForm)
      this.$refs.adminForm.validate((valid) => {
        if (valid) {
          this.changeAdminLoading = true
          changeAdmin(this.adminForm).then((res) => {
            this.changeAdminLoading = false
            this.$message({
              type: 'success',
              message: '管理员变更成功',
              onClose: () => {
                this.closeAdminDialog()
                this.getCompanyMsg(); // 根据登录人即可获取，不需要传参
                this.getOperationList();
              }
            })
          }).catch(() => {
            this.changeAdminLoading = false
          })
        }
      });
    },
    // 关闭变更管理员弹窗
    closeAdminDialog() {
      this.adminDialogVisible = false
      this.adminForm = {
        userId: "", // 管理员
        url: "", // '法人授权委托书',
        code: "",
        uuid: "",
      }
      this.$refs.adminForm.resetFields()
      this.sNumber = -1
      this.timer = null
    },
    // 获取变更账号code
    getAccountCode() {
      this.$refs.accountForm.validateField(['phonenumber'], (valid) => {
        if (!valid) {
          // { phonenumber: this.detailObj.adminOperation.contactPhone }
          this.accountCodeLoading = true
          getCode(6).then((res) => {
            this.accountCodeLoading = false
            this.accountForm.uuid = res.uuid;
            this.countDown()
          }).catch(() => {
            this.accountCodeLoading = false
          });
        }
      })
    },
    // 变更账号提交
    changeAccountSubmit() {
      this.$refs.accountForm.validate((valid) => {
        if (valid) {
          this.changeAccountLoading = true
          changeAccount(this.accountForm).then(() => {
            this.changeAccountLoading = false
            this.$message({
              type: 'success',
              message: '账号变更成功',
              onClose: () => {
                this.closeAccountDialog()
                this.getCompanyMsg(); // 根据登录人即可获取，不需要传参
                this.getOperationList();
              }
            })
          }).catch(() => {
            this.changeAccountLoading = false
          })
        }
      })
    },
    // 关闭变更账号弹窗
    closeAccountDialog() {
      this.accountDialogVisible = false
      this.accountForm = {
        phonenumber: "",
        code: "",
        uuid: "",
      }
      this.$refs.accountForm.resetFields()
      this.sNumber = -1
      this.timer = null
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";

.company_message_page {
  .authenticate_status {
    border-radius: 6px;
    box-shadow: 0 1px 2 0 rgba(1, 24, 70, 0.09);
    background-color: #fff;
    padding-left: 30px;
    padding-right: 60px;
    height: 110px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    .name_box {
      display: flex;
      align-items: center;
      .name {
        color: #333;
        font-size: 30px;
        font-weight: 600;
      }
      .status {
        width: 100px;
        height: 30px;
        margin-left: 16px;
        background-color: red;
      }
    }
    .btn {
      width: 96px;
      border-radius: 3px;
      font-weight: 500;
    }
  }
  .mod {
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
    background-color: #fff;
    margin-bottom: 16px;
    padding-top: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      color: #333;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      padding-left: 16px;
      .icon {
        display: block;
        width: 3px;
        height: 16px;
        background-color: $theme;
        margin-right: 5px;
      }
    }
    .content {
      padding: 40px 40px 2px;
      .img_list {
        display: flex;
        padding-left: 80px;
        padding-bottom: 38px;
        .img_item {
          .img_box {
            width: 262px;
            height: 165px;
          }
          .sign_box {
            width: 165px;
            height: 165px;
          }
          .img_box,
          .sign_box {
            position: relative;
            margin-right: 30px;
            .img {
              display: block;
              width: 100%;
              height: 100%;
            }
            .mask {
              display: none;
            }
            &:hover {
              .mask {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 30px;
                font-weight: 600;
              }
            }
          }
          .name {
            margin-top: 20px;
            color: #333;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
          }
        }
      }
      .sign {
        margin-bottom: 38px;
        padding-left: 80px;
        display: flex;
        .img_box {
          .img {
            display: block;
            width: 165px;
            height: 165px;
            background-color: red;
          }
          .name {
            margin-top: 20px;
            color: #333;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
          }
        }
      }
      .msg_box {
        .row {
          display: flex;
          align-items: center;
          margin-bottom: 38px;
          .msg_line {
            display: flex;
            align-items: center;
            .key {
              width: 206px;
              height: 14px;
              color: #777;
              font-size: 14px;
              text-align: right;
              flex-shrink: 0;
            }
            .text {
              width: 270px;
              color: #555;
              font-size: 14px;
              flex-shrink: 0;
              margin-right: 20px;
            }
            .val {
              width: 198px;
              color: #333;
              font-size: 14px;
            }
            .value {
              flex: 1 1 auto;
              color: #333;
              font-size: 14px;
              .btn {
                width: 120px;
              }
            }
          }
        }
      }
    }
  }
  .dialog {
    .content {
      padding: 30px;
      .code_line {
        display: flex;
        align-items: center;
        .get_code {
          margin-left: 30px;
        }
      }
      .upload_box {
        margin-bottom: 20px;
        display: flex;
        ::v-deep .el-form-item {
          margin-bottom: 0;
        }
        .upload_line {
          display: flex;
          align-items: center;
          .sign_template {
            width: 262px;
            height: 165px;
          }
          .pdf {
            width: 165px;
            height: 165px;
          }
          .sign_template,
          .pdf {
            border-radius: 5px;
            margin-right: 40px;
            position: relative;
            .upload_input {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 2;
              opacity: 0;
            }
            .img {
              display: block;
              width: 100%;
              height: 100%;
            }
            .mask {
              display: none;
            }
            &:hover {
              .mask {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                color: #fff;
                font-size: 30px;
                font-weight: 600;
                .preview,
                .delete {
                  cursor: pointer;
                }
              }
            }
          }
          .sign_template {
            background: #e0f0ff url("../../../assets/authenticate/sign.jpg")
              no-repeat 0 0;
            background-size: 100% 100%;
            &:hover {
              background: #e0f0ff
                url("../../../assets/authenticate/sign_hover.jpg") no-repeat 0 0;
              background-size: 100% 100%;
            }
          }
          .signature_template {
            color: #333;
            font-size: 18px;
            font-weight: 600;
            margin-top: 35px;
            margin-right: 20px;
            display: flex;
            align-items: center;
            .download_template {
              .download_btn {
                color: $theme;
                font-size: 18px;
                font-weight: 600;
                margin-left: 20px;
                .icon {
                  color: $theme;
                  margin-right: 4px;
                }
              }
            }
          }
          .desc {
            .download_a {
              font-size: 14px;
              color: $theme;
            }
          }
        }
      }
      .btns {
        margin-top: 50px;
        display: flex;
        justify-content: center;
        .btn {
          width: 120px;
        }
      }
    }
  }
}
</style>
